<template>
<div style="text-align: left">
    <div class="nav" @mouseover="yiru" @mouseleave="yichu">
        <img class="xuanfu" src="../assets/yt.png" />
        <div id="hc">
            <button class="xuanfu" @click="fan">上一步</button>
            <input type="text" v-if="this.zhuoid.zhuangtai === 0" placeholder="就餐人数" class="xuanfu" v-model="input" />
            <input type="text" v-if="this.zhuoid.zhuangtai === 1" placeholder="就餐人数" class="xuanfu" v-model="input2" />
            <button class="xuanfu" @click="queding">确定点餐</button>
        </div>
    </div>

    <el-row :gutter="20">
        <el-col :span="4" v-for="item in ccc" :key="item.id">
            <div class="bg-purple2">
                <img :src="imgUrl+item.food_img" alt />
                <h3 class="diantitle">{{item.food_name}}</h3>
                <p class="dianqian">价格：{{item.food_price}}</p>
                <el-input-number v-model="item.comid" @change="handleChange(item)" :min="0" :max="100" label="点菜" size="mini" id="anniu"></el-input-number>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import * as api from "../utils/api";
export default {
    name: "diancan",
    data() {
        return {
            input: "",
            input2: this.zhuoid.ren,
            tableData: [],
            imgUrl: "http://101.37.146.52:3000/",
            from: [{
                food_table_id: this.zhuoid.id,
                foods: [],
            }, ],
        };
    },
    // 获取到桌号
    props: ["zhuoid"],
    created() {
        this.axios({
            url: api.GET_CAI,
            method: "get",
        }).then((data) => {
            console.log(data.data.data);
            this.tableData = data.data.data;
        });
    },
    methods: {
        open22() {
            this.$message({
                message: "点餐成功",
                type: "success",
                center: true,
            });
        },
        handleChange(value) {
            // console.log(value);
            let obj = {
                food_id: value.id,
                food_count: value.comid,
                food_count_money: value.food_price,
            };
            if (this.from[0].foods.length === 0) {
                this.from[0].foods.push(obj);
            } else {
                for (let i = 0; i < this.from[0].foods.length; i++) {
                    if (this.from[0].foods[i].food_id === value.id) {
                        console.log(111);
                        this.from[0].foods[i].food_count = value.comid;
                        if (value.comid === 0) {
                            this.from[0].foods.splice(i, 1);
                        }
                        break;
                    } else {
                        if (i === this.from[0].foods.length - 1) {
                            this.from[0].foods.push(obj);
                            console.log(222);
                            break;
                        }
                    }
                }
            }
            console.log(this.from[0].foods);
        },
        yiru() {
            let a = document.getElementById("hc");
            a.style.display = "block";
        },
        yichu() {
            let a = document.getElementById("hc");
            a.style.display = "none";
        },
        fan() {
            this.$router.push("/oder");
            this.$emit("diancai2");
            console.log(123);
        },
        queding() {
            console.log(this.zhuoid.zhuangtai);
            // console.log(this.from[0].foods);
            // 点菜发起if里面的axios请求，加菜发起eles里面的请求
            if (this.zhuoid.zhuangtai === 0) {
                if (this.input === "") {
                    this.input = 0;
                }
                this.axios({
                    url: api.POST_REPASTNUM,
                    method: "POST",
                    data: {
                        food_table_number: this.zhuoid.num,
                        food_table_peoples: this.input,
                    },
                }).then((data) => {
                    // console.log(data);
                    // 在这里发起点菜请求
                    if (data.data.code === 200) {
                        this.axios({
                            url: api.POST_ADDFOOD2,
                            method: "post",
                            data: {
                                food_table_id: this.from[0].food_table_id,
                                foods: this.from[0].foods,
                            },
                        }).then((data) => {
                            console.log(data);
                            this.open22();
                            setTimeout(() => {
                                this.fan();
                            }, 2000);
                        });
                    }
                });
            } else {
                // 加菜请求
                console.log(666, this.zhuoid.num);
                this.axios({
                    url: api.POST_REPASTNUM,
                    method: "POST",
                    data: {
                        food_table_number: this.zhuoid.num,
                        food_table_peoples: this.input2,
                    },
                }).then((data) => {
                    if (data.data.code === 200) {
                        this.axios({
                            url: api.POST_ADDFOOD3,
                            method: "post",
                            data: {
                                food_table_id: this.from[0].food_table_id,
                                foods: this.from[0].foods,
                            },
                        }).then((data) => {
                            console.log(data);
                            this.open22();
                            setTimeout(() => {
                                console.log(789);
                                this.fan();
                            }, 2000);
                        });
                    }
                });
            }
        },
    },
    computed: {
        ccc() {
            for (let i = 0; i < this.tableData.length; i++) {
                // 循环添加响应式数据
                this.$set(this.tableData[i], "comid", 0);
            }
            return this.tableData;
        },
    },
};
</script>

<style lang="less">
#peopleNum {
    max-width: 100px;
    height: 30px;
    outline: none;
}

.el-row {
    text-align: center;
}

.bg-purple2 {
    background-color: #ff7119;
    border: 2px solid #fff;
    min-height: 200px;
    position: relative;
    overflow: hidden;

    img {
        // margin-top: 5px;
        width: 100%;
        height: 100px;
    }
}

#anniu {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.diantitle {
    font-size: 20px;
    color: white;
}

.dianqian {
    margin: 5px 0;
    color: white;
}

.nav {
    position: fixed;
    right: 20px;
    top: 110px;
    z-index: 10;
    background-color: #fff;

    img {
        width: 50px;
        cursor: pointer;
        margin: auto;
    }

    input {
        width: 70px;
        outline: none;
        height: 30px;
        margin: 20px auto;
        border: none;
    }

    button {
        width: 70px;
        height: 30px;
        margin: 0 auto;
        outline: none;
        border: none;
        cursor: pointer;
    }

    div {
        background-color: red;
        width: 100px;
        height: 150px;
        border: 1px solid red;
        display: none;
        padding-top: 5px;
    }
}

.xuanfu {
    display: block;
}
</style>
